<!DOCTYPE html>
<!-- saved from url=(0028)http://www.intable.net/demo/ -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>品牌植入订单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/brand.css">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/autosize.js"></script>
</head>

<body>
    <div class="code">
        <div class="title">品牌植入订单</div>
        <form action="http://www.intable.net/demo/xxxxxxx.php" method="post">
            <div class="content">
                <div class="intable">
                    <div class="pick zong">
                        <input type="checkbox" ck="0">
                        <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                    </div>
                    <span>intable 志</span>
                </div>
                <div class="box">
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick='pick'>
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>
                            <div style="background-image: url(./icon/icon1.png)" class="tit">
                                <span>基本植入</span>
                            </div>
                        </div>
                        <div class="number">
                            <select id="select">
                                <option value="5"> 5</option>
                                <option value="10"> 10</option>
                                <option value="15"> 15</option>
                                <option value="20"> 20</option>
                            </select>
                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                            <span>场</span>
                        </div>
                        <div class="allPrice">
                            <span class="all">计</span>
                            <span class="price">￥50000</span>
                        </div>
                    </div>
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">品牌产品展示</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">一场10-20人的体验活动(可作为微信粉丝抽奖福利或VIP活动)</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">现场照片拍摄－体验店拍摄(每场环境3张，产品3张，活动细节图3张，互动3张)</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">体验导师KOL的深度体验帖(1篇／5场，可作为微信主题内容帖或其他传播)</span>
                            </div>
                        </li>
                    </ul>
                    <div class="extra">
                        附加:
                    </div>
                    <div class="person">
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">来宾定向邀约</span>
                        </div>
                    </div>
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>品牌邀约
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥0</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>intable邀约
                            </div>
                            <textarea style="resize: none; overflow: hidden; word-wrap: break-word; height: 34px;" class="tj" name="" id="textarea1" placeholder="  请输入邀约条件" data-autosize-on="true"></textarea>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>课时费
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥5000</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="box2">
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>
                            <div style="background-image: url(./icon/icon2.png)" class="tit">
                                <span>内容策划</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">￥10000</span>
                        </div>
                    </div>
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">KOL现场引导品牌相关内容(结合原体验内容植入产品)</span>
                            </div>
                        </li>
                    </ul>
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>
                            <div style="background-image: url(./icon/icon3.png)" class="tit">
                                <span>场地布置</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">￥10000</span>
                        </div>
                    </div>
                    <textarea style="resize: none; overflow: hidden; word-wrap: break-word; height: 34px;" name="" id="textarea1" placeholder="  输入具体布置要求" data-autosize-on="true"></textarea>
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>
                            <div style="background-image: url(./icon/icon4.png)" class="tit">
                                <span>主题策划</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">￥20000</span>
                        </div>
                    </div>
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">品牌定制主题</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">KOL甄选／邀约／日常沟通</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">KOL主题阐述</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">邀请函设计</span>
                            </div>
                        </li>
                    </ul>
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>
                            <div style="background-image: url(./icon/icon5.png)" class="tit">
                                <span>品牌定制工具</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">&nbsp;&nbsp;待定</span>
                        </div>
                    </div>
                    <textarea name="" id="textarea" placeholder=" 输入具体内容：                                               如印有品牌logo的妈妈围裙；料理工具或餐具等" data-autosize-on="true" style="overflow: hidden; resize: horizontal; word-wrap: break-word; height: 53px;"></textarea>
                </div>
                <div style="padding-top: 20px" class="intable">
                    <div class="pick zong">
                        <input type="checkbox" ck="0">
                        <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                    </div>
                    <span>intable 秀</span>
                </div>
                <div class="box3">
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">专业团队现场视频及高清细节图片拍摄(体现氛围／互动／品牌产品)</span>
                            </div>
                        </li>
                    </ul>
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>短视频/GIF(4-6条/5场)
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥10000</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>1分钟视频/5场
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥20000</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>3分钟视频/5场
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥50000</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>H5设计及制作
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥20000</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--  intable 课程  -->
                <!--  intable 课程  -->
                <!--  intable 课程  -->
                <div style="padding-top: 20px" class="intable">
                    <div class="pick zong">
                        <input type="checkbox" ck="0">
                        <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                    </div>
                    <span>intable 课</span>
                </div>
                <div class="box3">
                    <ul class="pickPerson" style="position: relative;padding-bottom: 30px;">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>全程课程视频录制(45分钟-1个小时)
                            </div>
                            <div style="position: absolute;bottom: 0;right: 0;" class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥10000</span>
                            </div>
                        </li>
                        <li class="extraPick">
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>后期编辑成收费网络课堂
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- intable 说 -->
                <!-- intable 说 -->
                <!-- intable 说 -->
                <div style="padding-top: 20px" class="intable">
                    <div class="pick zong">
                        <input type="checkbox" ck="0">
                        <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                    </div>
                    <span>intable 说</span>
                </div>
                <div class="box3">
                    <ul class="pickPerson" style="position: relative;padding-bottom: 30px;">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>KOL引领来宾互动环节(品牌设定或KOL提供互动话题)
                            </div>
                            <div style="position: absolute;bottom: 0;right: 0;" class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥10000</span>
                            </div>
                        </li>
                        <li class="extraPick">
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>用户口碑＋KOL引导与总结,形成社交媒体热门话题文章
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- intable 传播 -->
                <!-- intable 传播 -->
                <!-- intable 传播 -->
                <div style="padding-top: 20px" class="intable">
                    <div class="pick zong">
                        <input type="checkbox" ck="0">
                        <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                    </div>
                    <span>intable 传播</span>
                </div>
                <div class="box3">
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>KOL自媒体发布
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>网络平台直播
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                        <li>
                            <div style="margin-bottom: 5px" class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>KOL集群传播
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                        <textarea name="" id="textarea" placeholder=" 输入KOL类别需求及粉丝量需求" data-autosize-on="true" style="overflow: hidden; resize: horizontal; word-wrap: break-word; height: 34px;"></textarea>
                        <li style="margin-top: 1px;">
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck="0" pick="pick">
                                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                                </div>广泛性传播(其他网络传播方式)
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="computed">
                <div class="list1">
                    <span>总计：</span>
                    <span style="color: red" id="total">待定</span>
                </div>
                <input type="submit" value="提交" class="sub">
            </div>
        </form>
    </div>
    <script>
    //每场价格
    var basePrice = 200;
    var arr = [];
    //给大栏目 加class
    for (var n = 0; n < $('.zong').length; n++) {
        if (n == 0) {
            $('.zong').eq(n).find('input[type=checkbox]').addClass('tot0');
        } else {
            $('.zong').eq(n).find('input[type=checkbox]').addClass('tot');
        }

    }
    //总场数价格
    var changePrice = 0;
    changePrice = $('#select').val();
    $('.allPrice').eq(0).find('.price').html('￥' + changePrice * 10000)
        //下拉框的变化
    $('#select').change(function() {
        changePrice = $('#select').val();
        $('.allPrice').eq(0).find('.price').html('￥' + changePrice * 10000);
        var zj = compute();
        $('#total').html('￥' + zj)
    });

    var tps = $('input[type=checkbox]');
    for (var i = 0; i < tps.length; i++) {
        arr.push(tps.eq(i));
    }
    //找到后面没有价格的input
    tps.change(function() {
        if ($(this).hasClass('tot')) {
            if ($(this).attr('ck') == 0) {
                $(this).parents('.intable').next().find('input[type=checkbox]').attr('ck', 1);
                $(this).parents('.intable').next().find('i').show();
            } else {
                $(this).parents('.intable').next().find('input[type=checkbox]').attr('ck', 0);
                $(this).parents('.intable').next().find('i').hide();
            }
        } else if ($(this).hasClass('tot0')) {
            if ($(this).attr('ck') == 0) {
                tps.eq(1).attr('ck', 1);
                tps.eq(1).next().show();
            } else {
                tps.eq(1).attr('ck', 0);
                tps.eq(1).next().hide();
            }
        }
        if ($(this).attr('ck') == 0) {
            $(this).attr('ck', 1);
            $(this).next().show();
            if ($(this).parent().parent().parent().next().hasClass('extraPick')) {
                $(this).parent().parent().parent().next().find('i').show();
            }
        } else {
            $(this).next().hide()
            $(this).attr('ck', 0);
            if ($(this).parent().parent().parent().next().hasClass('extraPick')) {
                $(this).parent().parent().parent().next().find('i').hide();
            }
        }
        var zj = compute();
        $('#total').html('￥' + zj)
    })

    function compute() {
        var total = 0;
        for (var n = 0; n < tps.length; n++) {
            if (tps.eq(n).attr('ck') == 1 && tps.eq(n).attr('pick') == 'pick') {

                var num = tps.eq(n).parent().parent().parent().find('.allPrice .price').html();
                if (num == '待定') {
                    num = 0;
                    total += parseFloat(num);
                } else {
                    console.log(num)
                    num = num.substring(1);
                    total += parseFloat(num);
                }

            }

        }
        return total;
    }


    //  inp.eq(0).change(function() {
    //      if ($(this).attr('ck') == 0) {
    //          for (var b = 0; b < 2; b++) {
    //              inp.eq(b).attr('ck', 1);
    //              inp.eq(b).next().show()
    //          }
    //      } else {
    //          for (var b = 0; b < 2; b++) {
    //              inp.eq(b).attr('ck', 0);
    //              inp.eq(b).next().hide()
    //          }
    //      }
    //
    //      compute();
    //  })
    //  inp.eq(14).change(function() {
    //      if ($(this).attr('ck') == 0) {
    //          for (var b = 14; b < 17; b++) {
    //              inp.eq(b).attr('ck', 1);
    //              // inp.eq(b).next().show()
    //
    //          }
    //      } else {
    //          for (var b = 15; b < 17; b++) {
    //              inp.eq(b).attr('ck', 0);
    //              // inp.eq(b).next().hide()
    //          }
    //      }
    //      compute();
    //  })


    //变化时价格总计
    //  function compute() {
    //      var total = 0;
    //
    //      for (var k = 0; k < inp.length; k++) {
    //          if (k == 0) {
    //
    //          } else if (k == 1 || k == 5 || k == 6 || k == 7) {
    //              if (inp.eq(k).attr('ck') == 1) {
    //                  var tmp = inp.eq(k).parents('.base').find('.price').html();
    //                  tmp = tmp.substring(1)
    //                  total += parseFloat(tmp)
    //              }
    //          } else if (k == 3 || k == 9 || k == 14 || k == 17 || k == 18 || k == 19 || k == 20 || k == 21) {
    //
    //          } else {
    //              if (inp.eq(k).attr('ck') == 1) {
    //                  var tmp = inp.eq(k).parents('li').find('.price').html();
    //                  tmp = tmp.substring(1)
    //                  total += parseFloat(tmp)
    //              }
    //          }
    //
    //
    //      };
    //      console.log(total)
    //      $('#total').html('￥' + total);
    //  }
    //单选框的变化
    $('.pick').find('i').hide();
    //  for (var m = 0; m < inp.length; m++) {
    //      if (m > 0) {
    //          inp.eq(m).change(function() {
    //              if ($(this).attr('ck') == 0) {
    //                  $(this).attr('ck', 1);
    //                  $(this).next().show()
    //              } else {
    //                  $(this).next().hide()
    //                  $(this).attr('ck', 0);
    //              }
    //              compute()
    //          })
    //      }
    //  }
    </script>
    <script>
    autosize(document.querySelectorAll('textarea'));
    </script>
</body>

</html>
